<template>
	<div class="root">
		<!-- 导航栏 -->
		<div class="nav-bar">
			<span :class="{ active: currentTab === 'unused' }" @click="currentTab = 'unused'">
				未使用
			</span>
			<span :class="{ active: currentTab === 'used' }" @click="currentTab = 'used'">
				已使用
			</span>
			<span :class="{ active: currentTab === 'expired' }" @click="currentTab = 'expired'">
				已过期
			</span>
		</div>

		<!-- 内容展示区域 -->
		<!-- 未使用 -->
		<view class="box" v-if="currentTab === 'unused'">
			<!-- 优惠值 -->
			<view class="left">
				<!-- 价格 -->
				<view class="value">
					<view class="sign">¥</view>
					<view class="number">10</view>
				</view>
				<!-- 优惠条件 -->
				<view class="condition">满200元可用</view>
			</view>
			<!-- 优惠券介绍 -->
			<view class="right">
				<view class="use">通用/仅限于华蓝加油站使用</view>
				<view class="bottom">
					<view class="time">2020.04.11至2020.05.11</view>
					<view class="receive">立即使用</view>
				</view>
			</view>
		</view>
		
		<view class="box" v-if="currentTab === 'unused'">
			<!-- 优惠值 -->
			<view class="left">
				<!-- 价格 -->
				<view class="value">
					<view class="sign">¥</view>
					<view class="number">10</view>
				</view>
				<!-- 优惠条件 -->
				<view class="condition">满200元可用</view>
			</view>
			<!-- 优惠券介绍 -->
			<view class="right">
				<view class="use">通用/仅限于华蓝加油站使用</view>
				<view class="bottom">
					<view class="time">2020.04.11至2020.05.11</view>
					<view class="receive">立即使用</view>
				</view>
			</view>
		</view>
		
		<!-- 已使用 -->
		<view class="box" v-if="currentTab === 'used'">
			<!-- 优惠值 -->
			<view class="has-left">
				<!-- 价格 -->
				<view class="value">
					<view class="sign">¥</view>
					<view class="number">10</view>
				</view>
				<!-- 优惠条件 -->
				<view class="condition">满200元可用</view>
			</view>
			<!-- 优惠券介绍 -->
			<view class="right">
				<view class="use">通用/仅限于华蓝加油站使用</view>
				<view class="bottom">
					<view class="has-time">2020.04.11至2020.05.11</view>
					<view class="has-receive">已使用</view>
				</view>
			</view>
		</view>
		
		<view class="box" v-if="currentTab === 'used'">
			<!-- 优惠值 -->
			<view class="has-left">
				<!-- 价格 -->
				<view class="value">
					<view class="sign">¥</view>
					<view class="number">10</view>
				</view>
				<!-- 优惠条件 -->
				<view class="condition">满200元可用</view>
			</view>
			<!-- 优惠券介绍 -->
			<view class="right">
				<view class="use">通用/仅限于华蓝加油站使用</view>
				<view class="bottom">
					<view class="has-time">2020.04.11至2020.05.11</view>
					<view class="has-receive">已使用</view>
				</view>
			</view>
		</view>
		
		<!-- 已过期 -->
		<view class="box" v-if="currentTab === 'expired'">
			<!-- 优惠值 -->
			<view class="has-left">
				<!-- 价格 -->
				<view class="value">
					<view class="sign">¥</view>
					<view class="number">10</view>
				</view>
				<!-- 优惠条件 -->
				<view class="condition">满200元可用</view>
			</view>
			<!-- 优惠券介绍 -->
			<view class="right">
				<view class="use">通用/仅限于华蓝加油站使用</view>
				<view class="bottom">
					<view class="has-time">2020.04.11至2020.05.11</view>
					<view class="has-receive">已过期</view>
				</view>
			</view>
		</view>
		
		<view class="box" v-if="currentTab === 'expired'">
			<!-- 优惠值 -->
			<view class="has-left">
				<!-- 价格 -->
				<view class="value">
					<view class="sign">¥</view>
					<view class="number">10</view>
				</view>
				<!-- 优惠条件 -->
				<view class="condition">满200元可用</view>
			</view>
			<!-- 优惠券介绍 -->
			<view class="right">
				<view class="use">通用/仅限于华蓝加油站使用</view>
				<view class="bottom">
					<view class="has-time">2020.04.11至2020.05.11</view>
					<view class="has-receive">已过期</view>
				</view>
			</view>
		</view>
	</div>
</template>

<script setup>
	import {
		ref
	} from 'vue';

	const currentTab = ref('unused');
</script>

<style scoped>
	/* 根标签 */
	.root {
		background-color: white;
		width: 100vw;
		height: 100vh;
		padding-top: 10px;
		padding-left: 15px;
		padding-right: 15px;
	}

	/* 导航栏 */
	.nav-bar {
		/* background-color: pink; */
		display: flex;
		justify-content: space-around;
		height: 50px;
		align-items: center;
		font-size: 18px;
	}
	/* 导航栏活跃的选项 */
	.nav-bar > .active {
		color: #1D6FFF;
	}
	
	/* 每条优惠券 */
	.box {
		 background-color: #F8F8F8;
		 border-radius: 5px;
		 display: flex;
		 align-items: center;
		 /* height: 100px; */
		 padding: 15px 0;
		 box-sizing: border-box;
		 margin-bottom: 15px;
	}
	/* 左边优惠值-未使用 */
	.left {
		 background-color: #1D6FFF;
		 height: 94px;
		 width: 115px;
		 border-radius: 10px;
		 color: white;
		 border: 2px solid #BBBBBB;
	}
	/* 左边优惠值-已使用/已过期 */
	.has-left {
		 background-color: #F4F4F4;
		 height: 94px;
		 width: 115px;
		 border-radius: 10px;
		 color: black;
		 border: 2px solid #BBBBBB;
	}
	/* 价格 */
	.value {
		 /* background-color: deepskyblue; */
		 width: 100%;
		 display: flex;
		 height: 65%;
		 padding-top: 20px;
		 margin-left: 25px;
	}
	/* 人民币符号 */
	.sign {
		 /* background-color: antiquewhite; */
		 font-size: 16px;
		 line-height: 40px;
	}
	/* .面值 */
	.number {
		 /* background-color: beige; */
		 font-size: 36px;
	}
	/* 优惠券满减 */
	.condition {
		 /* background-color: bisque; */
		 width: 100%;
		 height: 35%;
		 text-align: center;
		 font-size: 14px;
		 line-height: 30px;
	}
	/* 优惠券介绍 */
	.right {
		 /* background-color: pink; */
		 display: flex;
		 flex: 1;
		 height: 75px;
		 margin-left: 10px;
		 box-sizing: border-box;
		 border-left: 1px dotted #BBBBBB ;
		 padding-left: 10px;
		 display: block;
	}
	/* 使用方法 */
	.use {
		 /* background-color: beige; */
		 font-size: 14px;
		 height: 40px;
		 line-height: 40px;
	}
	/* 使用时间和领取按钮 */
	.bottom {
		 /* background-color: palegreen; */
		 display: flex;
		 align-items: center;
		 justify-content: space-between;
	}
	/* 时间-未使用 */
	.time {
		 /* background-color: pink; */
		 height: 40px;
		 font-size: 12px;
		 color: red;
		 line-height: 40px;
	}
	/* 时间-已使用/已过期 */
	.has-time {
		 /* background-color: pink; */
		 height: 40px;
		 font-size: 12px;
		 color: #999;
		 line-height: 40px;
	}
	/* 领取按钮 */
	.receive {
		 background-color: plum;
		 height: 30px;
		 width: 80px;
		 color: white;
		 line-height: 30px;
		 text-align: center;
		 background-color: #0084FF;
		 border-radius: 5px;
	}
	/* 已使用/已过期 */
	.has-receive {
		 background-color: plum;
		 height: 30px;
		 width: 80px;
		 color: white;
		 line-height: 30px;
		 text-align: center;
		 background-color: #BEBEBE;
		 border-radius: 5px;
	}
</style>